<template>
  <div class="change-theme">
    <n-switch
      v-model:value="themeActive"
      @update:value="changeTheme"
      size="large"
      :rail-style="railStyle"
    >
      <template #checked>
        <i class="iconfont icon-baitian"></i>
      </template>
      <template #unchecked>
        <i class="iconfont icon-heian"></i>
      </template>
    </n-switch>
  </div>
  <n-message-provider>
    <router-view></router-view>
    <Mainfooter></Mainfooter>
  </n-message-provider>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import Mainfooter from './components/Mainfooter.vue';
import { useMainStore } from './store/index';
import { setRem } from './utils/utils–rem';
import { debounce } from 'throttle-debounce';
const store = useMainStore()
const themeActive=ref(false)
const changeTheme=()=>{
  if(themeActive.value){
    document.documentElement.className='theme-light'
    store.theme='light'
  }
  else{
    document.documentElement.className='default'
    store.theme='default'
  }
  window.localStorage.setItem("theme", store.theme);
}
const railStyle = ({ focused, checked }: any) => {
  const style = {
    background: "",
    boxShadow: "",
  };
  if (checked) {
    style.background = store.theme == "default" ? "#18A058" : "#409EFF";
    if (focused) {
      style.boxShadow = `0 0 0 2px ${
        store.theme == "default" ? "#18A058" : "#409EFF"
      }`;
    }
  } else {
    style.background = "#888";
    if (focused) {
      style.boxShadow = "0 0 0 2px #888";
    }
  }
  return style;
};
onMounted(() => {
  
  window.onresize = debounce(500, () => {
    setRem()
  }, { atBegin: false })
  let theme = window.localStorage.getItem("theme") || "default";
  themeActive.value = theme == "default" ? false : true;
  changeTheme();
});
</script>

<style lang="less">
@import "./assets/icon/iconfont.css";
#app {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  height: 100%;
  width: 100%;
}
.change-theme {
  @media screen and (max-width: 768px) {
       display: none;
  }
  display: flex;
  position: absolute;
  top: 10px;
  left: 30px;
}
</style>